<template>
  <div class="container">
    <el-card class="el-card">
      <el-form inline>
        <el-form-item label="时间">
          <el-date-picker
            type="daterange"
            start-placeholder="开始时间"
            format="yyyy-MM-dd"
            range-separator="至"
            end-placeholder="截止时间"
            :picker-options="pickerOptions" />
        </el-form-item>
        <el-form-item label="批次ID/券名称">
          <el-input v-model="form.couponName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="form.orderType" placeholder="请选择">
            <el-option
              v-for="item in orderTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="券类型">
          <el-select v-model="form.couponType" placeholder="请选择">
            <el-option
              v-for="item in couponTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-form-item :style="{ display: 'flex', justifyContent: 'flex-end' }">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetFields">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">用户相关</div>
      <el-row class="pl20 pr20" :gutter="10">
        <el-col :span="24">
          <div>
            <ul style="margin-top: 10px" class="flex-row">
              <li class="li">核销率</li>
              <li class="li">累计抵扣金额</li>
              <li class="li">补贴率</li>
            </ul>
            <ul class="flex-row">
              <li class="da">11</li>
              <li class="da">11</li>
              <li class="da">11</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">漏斗图</div>
      <funnel-chart :chart-data="funnelChartData" />
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">明细表</div>
      <el-table :data="tableData" v-loading="tableLoading">
        <el-table-column prop="id" label="UID" />
        <el-table-column prop="orderId" label="订单ID" />
        <el-table-column prop="couponId" label="优惠券批次ID" />
        <el-table-column prop="couponName" label="优惠券名称" />
        <el-table-column prop="discountAmount" label="抵扣金额" />
        <el-table-column prop="amount" label="本单实付金额" />
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import LineChart from "../dashboard/LineChart";
import PieChart from '../dashboard/PieChart';
import FunnelChart from '../dashboard/FunnelChart';

export default {
  components: {
    LineChart,
    PieChart,
    FunnelChart
  },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '本周',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setFullYear(2018);
              start.setMonth(10);
              start.setDate(1);
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '本月',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setFullYear(2018);
              start.setMonth(10);
              start.setDate(1);
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      form: {
        provinceCodeList: [],
        cityCodeList: [],
        Time: [],
        couponName: '',
        couponType: '',
        orderType: '',
        channel: ''
      },
      provinces: [],
      cities: [],
      couponTypes: [
        { value: '1', label: '优惠券' },
        { value: '2', label: '运费券' }
      ],
      orderTypes: [
        { value: '0', label: '全部' },
        { value: '1', label: '计划订单' },
        { value: '2', label: '商品订单' }
      ],
      funnelChartData: {
        name: '用户省份分布',
        data: [
          {
            name: '北京',
            value: 50
          },
          {
            name: '广东',
            value: 100
          },
          {
            name: '上海',
            value: 80
          },
          {
            name: '江苏',
            value: 110
          },
          {
            name: '福建',
            value: 102
          },
          {
            name: '浙江',
            value: 106
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['avatar', 'name'])
  },
  mounted() {},
  created() {},
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    handleSearch() {},
    resetFields() {}
  }
}
</script>

<style scoped lang="stylus">
.container
  .el-card {
    margin: 20px;
    font-size: 14px;
  }
  .flex-row {
    display flex;
    align-items center
  }
  .title {
    font-size: 16px;
    font-weight: 500;
  }
  .li {
    width: 25%;
    font-size: 12px;
    color: #999;
    text-align: center;
  }
  .da {
    margin-top: 10px;
    width: 25%;
    font-size: 20px;
    text-align: center;
  }

  .first {
    float: left;
    width: 50%;
    margin-bottom: 20px;
  }

  .el-table .warning-row {
    background: rgb(39, 138, 230);
  }
</style>
